<script setup>
import { ref } from 'vue'

// 用户管理数据
const users = ref([
  {
    id: 1,
    username: 'admin',
    role: '管理员',
    status: '启用',
    lastLogin: '2024-01-20 10:00:00'
  }
])

// 设备管理数据
const devices = ref([
  {
    id: 1,
    name: '温度传感器-A1',
    type: '温度传感器',
    location: 'A区域',
    status: '在线',
    lastUpdate: '2024-01-20 10:00:00'
  }
])

// 系统信息
const systemInfo = ref({
  version: 'v1.0.0',
  lastUpdate: '2024-01-20',
  status: '正常运行'
})

// 用户表单
const userForm = ref({
  username: '',
  password: '',
  role: '',
  status: '启用'
})

// 设备表单
const deviceForm = ref({
  name: '',
  type: '',
  location: '',
  description: ''
})

// 对话框控制
const userDialogVisible = ref(false)
const deviceDialogVisible = ref(false)

// 添加用户
const addUser = () => {
  userDialogVisible.value = true
}

// 添加设备
const addDevice = () => {
  deviceDialogVisible.value = true
}

// 提交用户表单
const submitUserForm = () => {
  // TODO: 实现用户添加逻辑
  userDialogVisible.value = false
}

// 提交设备表单
const submitDeviceForm = () => {
  // TODO: 实现设备添加逻辑
  deviceDialogVisible.value = false
}
</script>

<template>
  <div class="settings">
    <el-tabs>
      <!-- 用户管理 -->
      <el-tab-pane label="用户管理">
        <div class="action-bar">
          <el-button type="primary" @click="addUser">添加用户</el-button>
        </div>
        
        <el-table :data="users" border>
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="role" label="角色" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag :type="row.status === '启用' ? 'success' : 'danger'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastLogin" label="最后登录时间" />
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button type="primary" link>编辑</el-button>
              <el-button type="danger" link>删除</el-button>
              <el-button type="warning" link>重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 用户表单对话框 -->
        <el-dialog
          v-model="userDialogVisible"
          title="添加用户"
          width="500px">
          <el-form :model="userForm" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="userForm.username" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userForm.password" type="password" />
            </el-form-item>
            <el-form-item label="角色">
              <el-select v-model="userForm.role">
                <el-option label="管理员" value="admin" />
                <el-option label="操作员" value="operator" />
                <el-option label="访客" value="guest" />
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="userDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitUserForm">确定</el-button>
          </template>
        </el-dialog>
      </el-tab-pane>

      <!-- 设备管理 -->
      <el-tab-pane label="设备管理">
        <div class="action-bar">
          <el-button type="primary" @click="addDevice">添加设备</el-button>
        </div>

        <el-table :data="devices" border>
          <el-table-column prop="name" label="设备名称" />
          <el-table-column prop="type" label="设备类型" />
          <el-table-column prop="location" label="安装位置" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag :type="row.status === '在线' ? 'success' : 'danger'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastUpdate" label="最后更新时间" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="primary" link>编辑</el-button>
              <el-button type="danger" link>删除</el-button>
              <el-button type="warning" link>重启</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 设备表单对话框 -->
        <el-dialog
          v-model="deviceDialogVisible"
          title="添加设备"
          width="500px">
          <el-form :model="deviceForm" label-width="100px">
            <el-form-item label="设备名称">
              <el-input v-model="deviceForm.name" />
            </el-form-item>
            <el-form-item label="设备类型">
              <el-select v-model="deviceForm.type">
                <el-option label="温度传感器" value="temperature" />
                <el-option label="湿度传感器" value="humidity" />
                <el-option label="气体传感器" value="gas" />
              </el-select>
            </el-form-item>
            <el-form-item label="安装位置">
              <el-input v-model="deviceForm.location" />
            </el-form-item>
            <el-form-item label="设备描述">
              <el-input
                v-model="deviceForm.description"
                type="textarea"
                rows="3" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="deviceDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitDeviceForm">确定</el-button>
          </template>
        </el-dialog>
      </el-tab-pane>

      <!-- 系统信息 -->
      <el-tab-pane label="系统信息">
        <el-card>
          <el-descriptions border>
            <el-descriptions-item label="系统版本">
              {{ systemInfo.version }}
            </el-descriptions-item>
            <el-descriptions-item label="最后更新">
              {{ systemInfo.lastUpdate }}
            </el-descriptions-item>
            <el-descriptions-item label="系统状态">
              <el-tag type="success">{{ systemInfo.status }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>

          <div class="mt-4">
            <el-button type="primary">检查更新</el-button>
            <el-button type="warning">系统维护</el-button>
            <el-button type="danger">重启系统</el-button>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.settings {
  padding: 20px;
}
.action-bar {
  margin-bottom: 20px;
}
.mt-4 {
  margin-top: 20px;
}
</style>